<template>
	<view class="wrap">
		<u-navbar :title="$t('wdqb')" title-width="340" :border-bottom="false" back-icon-color="#fff" title-color="#fff" :background="{ backgroundColor: '#0030A8' }"></u-navbar>
		<view class="tom-container">
			<view class="Wallet_nr">
				<view class="Wallet_nr_title">{{$t('zzczh')}}（USDT）</view>
				<view class="Wallet_nr_conversion">
					<text class="text">12345000.42 USDT</text>
					<text class="text2">≈ ￥ 1234000056.123</text>
				</view>
				<view class="Wallet_nr_title">{{$t('zcmx')}}</view>
				<view class="Wallet_nr_xch">
					<view class="item">
						<text class="text">XCH</text>
						<text class="text">0.0000</text>
					</view>
					<view class="item">
						<text class="text2">{{$t('txqy')}}</text>
						<text class="text2">≈ 0 USDT</text>
					</view>
				</view>
				<swiper class="swiper" indicator-dots indicator-active-color="#0032B7" next-margin="240rpx">
					<swiper-item class="swiper_list">
						<view class="swiper_list_item">
							<view class="title">{{$t('qbzh')}}</view>
							<view class="value">123465.12 USDT</view>
						</view>
					</swiper-item>
					<swiper-item class="swiper_list" >
						<view class="swiper_list_item">
							<view class="title">{{$t('qbzh')}}</view>
							<view class="value">123465.12 USDT</view>
						</view>
					</swiper-item>
					<swiper-item class="swiper_list" >
						<view class="swiper_list_item">
							<view class="title">{{$t('qbzh')}}</view>
							<view class="value">123465.12 USDT</view>
						</view>
					</swiper-item>
				</swiper>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
		};
	},
	methods: {
	}
};
</script>

<style lang="scss" scoped>
.tom-container {
	padding-top: 50rpx;
	.Wallet_nr{
		display: flex;
		flex-direction: column;
		flex: 1;
		background-color: #fff;
		border-radius: 50rpx 50rpx 0rpx 0rpx;
		// background-image: url('/static/new_images/showPopup.png');
		// background-position: left bottom;
		// background-repeat: no-repeat;
		// background-size: 100% 800rpx;
		padding: 0px $nr-padd;
		.Wallet_nr_title{
			font-size: 32rpx;
			color: $tom-text-color;
			font-weight: bold;
			margin: 30rpx 0rpx 20rpx 0rpx;
		}
		.Wallet_nr_conversion{
			background-color: rgba(51, 51, 102, 0.1);
			padding: 18rpx 20rpx;
			border-radius: 10rpx;
			display: flex;
			align-items: center;
			margin-bottom:40rpx;
			.text{
				font-size: 32rpx;
				font-weight: bold;
				max-width: 310rpx;
				word-break: break-word;
				white-space: pre-line;
			}
			.text2{
				font-size: 28rpx;
				color: $tom-text-sub-color;
				margin-left: 10rpx;
				max-width: 310rpx;
				word-break: break-word;
				white-space: pre-line;
			}
		}
		.Wallet_nr_xch{
			background-color: rgba(51, 51, 102, 0.1);
			padding: 20rpx 30rpx;
			border-radius: 10rpx;
			margin-bottom: 30rpx;
			.item{
				display: flex;
				justify-content: space-between;
				.text{
					color:$tom-text-color;
					font-weight: bold;
					font-size: 36rpx;
				}
				.text2{
					color: $tom-text-sub-color;
					font-size: 24rpx;
				}
			}
		}
	}
}
.swiper{
	width: 100%;height: 220rpx;
	.swiper_list{
		width: 100%;
		.swiper_list_item{
			background-color: rgba(51, 51, 102, 0.1);
			width: 420rpx;
			padding: 30rpx;
			border-radius: 10rpx;
			.title{
				color: $text-color;
				font-size: 28rpx;
				font-weight: bold;
				margin-bottom: 20rpx;
			}
			.value{
				font-size: 32rpx;
				font-weight: bold;
				color: $tom-text-color;
			}
		}
	}
}
</style>
